<template>
  <div class="page-container">
    <div ref="plantRef" class="container-charts">各地区种植面积统计TOP10</div>
  </div>
</template>

<script>
//引入封装好的接口
import { getplantingAreaTop } from "../request/api";
export default {
  data() {
    return {
      yData: [],
      seriesData: [],
    };
  },
  computed:{
    getTheme(){
      return this.$store.state.theme
    }
  },
  watch:{
    getTheme(){
      this.info.dispose()
      this.initEcharts()
      this.getData()
      this.screen()
    }
  },
  mounted(){
    this.initEcharts()
    this.getData()
    this.screen()
    window.addEventListener('resize',this.screen)
  },
  destroyed(){
    window.removeEventListener('resize',this.screen)
  },
  methods: {
    initEcharts(){
        let dom=this.$refs.plantRef
        let myChart =this.$echarts.init(dom,this.getTheme)
        this.info=myChart
        let options={
            title: {
          text: "各地区种植面积统计TOP10", //主标题
          textStyle: {
            color: "#333",
            // fontSize: 30,
          },
          left:20,
          top:10
        },
        grid:{
            left:'15%',
            top:'15%',
            right:'6%',
            bottom:'10%'
        },
        xAxis: {
          type: "value",
          axisTick: {
            show: true, //轴刻度
          },
          axisLabel: {
            show: true, //坐标轴刻度标签
          },
          axisLine: {
            show: true,
          },
          axisPointer: {
            //鼠标滑过的指示器
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: this.yData,
        },
        series: [
          {
            type: "bar", //柱状图
            data: this.seriesData,
            label: {
              //显示当前柱的数值
              show: true,
              position: "right",
              // color:'red',
              // fontSize:40
            },
            itemStyle: {
              // color:'red' 设置每一个柱体的样式
              color: {
                type: "liner", // 线性渐变 渐变的起始位置 x y 起始点 结束点  x2 y2
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "white",
                  },
                  {
                    offset: 1,
                    color: "blue",
                  },
                ],
              },
            },
          },
        ],
      }
      myChart.setOption(options)
    },
    async getData(){
        let res=await getplantingAreaTop()
        res.data.sort((a,b)=>a.area-b.area)
        this.yData=res.data.map((item)=>item.name)
        this.seriesData=res.data.map((item)=>item.area)
        this.setData(this.yData,this.seriesData)
    },
    setData(y,s){
        this.info.setOption({
            yAxis:{
                type:"category",
                data:y
            },
            series:[
                {
                    type:'bar',
                    data:s
                }
            ]
        })
    },
    screen(){
        this.info.resize()
        let width=this.$refs.plantRef.offsetWidth
        let fontNum=width/100*5
        this.info.setOption({
            title:{
                textStyle:{
                    fontSize:fontNum
                }
            }
        })
    }
  },
};
</script>

<style lang="less" scoped>

</style>